<template>
    <div class="scope-wrap">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <!-- 头部左侧 -->
                <div class="media-display">
                    <el-link :underline="false" style="font-size: 20px">订单列表</el-link>
                    <el-divider direction="vertical"></el-divider>
                    <el-link :underline="false" style="font-size: 20px">要查询的订单：</el-link>
                    <el-button :type="condition.orderSate.unpaid ? 'primary' : 'info'" plain @click="choice($event.target,0)">未支付</el-button>
                    <el-button :type="condition.orderSate.paid ? 'success' : 'info'" plain @click="choice($event.target,1)">已支付</el-button>
                </div>

                <!-- 头部右侧 -->
                <div style="margin-left: auto">
                    <el-form :inline="true" :model="condition" class="demo-form-inline">
                        <el-form-item label="订单id：">
                            <el-input v-model="condition.orderId" placeholder="订单id"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="success" plain @click="init">查询</el-button>
                            <el-button style="margin-left: 10px" type="primary" plain @click="viewAll">全部订单</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 内容 -->
            <div class="text">
                <el-table
                        v-loading="listLoading"
                        highlight-current-row
                        :data="tableData.list"
                        style="width: 100%">
                    <!-- 展开行 -->
                    <el-table-column type="expand">
                        <template slot-scope="props">
                        </template>
                    </el-table-column>
                    <el-table-column
                            type="index"
                            :index="(this.tableData.currentPage-1)*this.tableData.pageSize + 1"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="orderId"
                            label="订单号">
                    </el-table-column>
                    <el-table-column
                            prop="totalAmount"
                            label="总金额"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="创建时间"
                            prop="createTime">
                        <template slot-scope="scope">
                            <span>{{ scope.row.createTime | timestampToTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="支付时间"
                            prop="createTime">
                        <template slot-scope="scope">
                            <span>{{ scope.row.updateTime | timestampToTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="状态">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper" >
                                <el-tag style="cursor: pointer;width: 60px;text-align: center"
                                        :type="scope.row.orderSate === 1 ? 'warning':
                        (scope.row.orderSate === 2 ? 'primary' : 'success')">
                                    <span>{{ scope.row.orderSate | orderFilter}}</span>
                                </el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="gotoDetail(scope.row.productId)">详情</el-button>
                        </template>

                    </el-table-column>
                </el-table>

                <!--分页-->
                <el-pagination style="text-align: center"
                               @current-change="handleCurrentChange"
                               :current-page="this.tableData.currentPage"
                               :page-size="this.tableData.pageSize"
                               layout="total, prev, pager, next, jumper"
                               :total="this.tableData.total">
                </el-pagination>
            </div>
        </el-card>

    </div>
</template>


<script>
    import { getHistoryOrderInfoReq } from "@/api/order";
    import settings from '@/settings'

    export default {
        name: "test",
        data(){
            return{
                prefix : settings.prefix || '/product-mainImg/phone/xiaomi/k50.jpg',// 全局前缀
                listLoading: true,// 表格loading
                tableData : {},// 历史订单信息

                condition: {// 搜索条件
                    orderSate: {// 存放要搜索的分区id
                        unpaid: true,
                        paid: true,
                    },
                    orderId : '',// 订单id
                    currentPage: 1,// 当前页默认为1
                },
            }
        },
        methods : {
            init(){
                if (!Object.values(this.condition.orderSate).includes(true)){
                    this.$message.warning({message: '至少选择一个状态'})
                    return;
                }
                this.listLoading = true
                getHistoryOrderInfoReq({ condition : this.condition }).then(response => {
                    console.log(response)
                    if (response.state === true) {
                        this.tableData = response.data.page//
                        this.listLoading = false
                        this.$notify.success({title: '成功',message: response.message, duration: 1500});
                    }else{
                        this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                    }
                })
            },
            handleCurrentChange(currentPage){//处理分页数据
                this.condition.currentPage = currentPage;
                this.init()
            },
            viewAll(){//查看全部用户
                Object.assign(this.$data.condition, this.$options.data().condition);
                this.init();
            },
            handleState(){
                console.log(this.condition)
            },
            choice(event, categoryId){
                switch (categoryId) {
                    case 0 : this.condition.orderSate.unpaid = !this.condition.orderSate.unpaid;break;
                    case 1 : this.condition.orderSate.paid = !this.condition.orderSate.paid;break
                }
                if(event.nodeName === 'SPAN' || event.nodeName === 'I'){
                    event = event.parentNode;
                }
                event.blur();
            },
            gotoDetail(productId){// 去商品详情页
                this.$router.push(`/product/detail/${productId}`)
            },
            updateState(index ,id){
                console.log(index,id)
            },

            handleClose(done) {
                this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});
            },
        },
        filters: {
            orderFilter(categoryId){
                switch (categoryId) {
                    case 0 : return "未支付";
                    case 1 : return "已支付";
                }
            },
            // 时间戳转换成时间
            timestampToTime (timestamp) {
                let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '-'
                let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
                let D = date.getDate() + ' '
                let h = date.getHours() + ':'
                let m = date.getMinutes() + ':'
                let s = date.getSeconds()
                s = s < 10 ? '0' + s : s;
                return Y+M+D+h+m+s;
            },
        },
        beforeMount (){//初始化数据
            this.init();
        },
        mounted(){
        },
    }
</script>

<style scoped>

    .scope-wrap{
        width: 70vw;
        margin: 0 auto;
    }

    @media (max-width: 1100px){
        .media-display{
            display: none;
        }
    }
    .el-form{
        width: auto;
    }
    *{
        outline: none;
    }

    .el-card__header{
        background-color: rgba(0,0,0,.03);
    }
    .el-card__body{
        padding-top: 0;
    }
    .clearfix{
        display: flex;
        align-items: center;
    }
    .text {
        font-size: 14px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    tr{
        height: 60px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    >>> .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-form--inline .el-form-item__content{
        vertical-align: baseline;
    }
    .el-switch__label{
        color: #909399;
    }

</style>
